<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
import Transaction from "./transaction";
/**
 * Dashboard component
 */
export default {
  components: {
    Layout,
    PageHeader,
    Transaction,
  },
  data() {
    return {
      title: "数据采集",
      // 信源类型
      sourcetype: [
        {
          name: "全部站点",
          index: 1,
        },
        {
          name: "资讯采集",
          index: 2,
        },
        {
          name: "招标采集",
          index: 3,
        },
        {
          name: "政策采集",
          index: 4,
        },
        {
          name: "工商采集",
          index: 5,
        },{
          name: "标准采集",
          index: 6,
        },{
          name: "政务采集",
          index: 7,
        },
      ],
      sourceChange: 1,
      // 采集类型
      collectiontype: [
        {
          name: "全部",
          index: 1,
        },
        {
          name: "手动配置",
          index: 2,
        },
        {
          name: "自动采集",
          index: 3,
        },
        {
          name: "代码采集(xxl-Job)",
          index: 4,
        }
      ],
      collectionChange: 1,
      // 统计类型
      statisticaltype: [
        {
          name: "失效",
          index: 1,
        },
        {
          name: "抓取错误",
          index: 2,
        },
        {
          name: "解析错误",
          index: 3,
        },
        {
          name: "采集入库",
          index: 4,
        }
      ],
      statisticalChange: 1,
      // 图表
      splineAreaChart: {
        series: [
          {
            name: "资讯采集", 
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "招标采集",
            data: [220, 182, 191, 234, 290, 330, 310],
          },{
            name: "政策采集",
            data: [150, 232, 201, 154, 190, 330, 410],
          },{
            name: "工商采集",
            data: [320, 332, 301, 334, 390, 330, 320],
          },{
            name: "全部采集",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
        chartOptions: {
          legend: {
            show: true,
            position: 'top',
            horizontalAlign: 'center',
          },
          chart: {
            stacked: false,
            toolbar: {
              show: false,
            },
          },
          dataLabels: {
            enabled: false,
          },
          stroke: {
            curve: "smooth",
            width: 3,
          },
          colors: ["#556ee6", "#34c38f", "#fbd88a", "#f39494", "#9dd3e8"],
          xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
          },
          grid: {
            borderColor: "#f1f1f1",
          },
        },
      },
      // 时间筛选
      timeFrame: [
        {
          days: "7天",
          index: 1,
        },
        {
          days: "15天",
          index: 2,
        },
        {
          days: "30天",
          index: 3,
        },
      ],
      timeChange: 1,
      // 站点筛选
      sitetype: [
        {
          name: "全部站点",
          index: 1,
        },
        {
          name: " 资讯站点",
          index: 2,
        },
        {
          name: "招标站点",
          index: 3,
        },
        {
          name: "政策站点",
          index: 4,
        },
        {
          name: "工商站点",
          index: 5,
        },
        {
          name: "证券",
          index: 6,
        },
      ],
      siteChange: 1,
      // 爬虫类型
      reptiletype: [
        {
          name: "全部",
          index: 1,
        },
        {
          name: "手动配置",
          index: 2,
        },
        {
          name: "自动采集",
          index: 3,
        },
        {
          name: "代码采集(xxl-Job)",
          index: 4,
        },
      ],
      reptileChange: 1,
      //类型筛选
      states: [
        {
          type: "全部",
          index: 1,
        },
        {
          type: "异常",
          index: 2,
        },
        {
          type: "未配置",
          index: 3,
        },
        {
          type: "停止更新",
          index: 4,
        },
        {
          type: "正常",
          index: 5,
        },
      ],
      stateChange: 1,
      // 展示全部
      allShow: true,
    };
  },
  methods: {
    // 信源筛选
    source(item){
      this.sourceChange = item.index;
    },
    // 采集筛选
    collection(item){
      this.collectionChange = item.index;
    },
    // 采集筛选
    statistical(item){
      this.statisticalChange = item.index;
    },
    //时间筛选
    timeTitle(item) {
      this.timeChange = item.index;
    },
    //站点筛选
    allSites(item) {
      this.siteChange = item.index;
    },
    // 爬虫类型
    reptile(item){
      this.reptileChange = item.index;
    },
    //类型筛选
    statesItem(item) {
      this.stateChange = item.index;
    },
    // 展示全部
    allShowIsActive() {
      this.allShow = true;
    },
    hideShowIsActive() {
      this.allShow = false;
    },
    btn(){
      window.open('../../../static/spiderflow/editor.html')
    },
  },
};
</script>

<template>
  <Layout>
    <PageHeader :title="title" items="" />
    <div>
      <div class="card col-12 seedbody card-body" style="margin-bottom: 24px;margin-top:0;">
        <div>
          <div class="count">
            <span class="title">采集状态走势统计</span
            ><span class="zhankai"
              ><img
                src="@/assets/images/seed/zhankai.png"
                alt=""
                @click="allShowIsActive" /><img
                src="@/assets/images/seed/shousuo.png"
                @click="hideShowIsActive"
                alt=""
            /></span>
          </div>
          <div v-show="allShow">
            <div class="states-type">
              <span class="type-title">信源类型:</span>
              <b-badge
                variant="light"
                class="states-type-item"
                :class="{ isActive: sourceChange == item.index }"
                v-for="item in sourcetype"
                :key="item.index"
                @click="source(item)"
              >
                {{ item.name }}</b-badge
              >
            </div>
            <div class="states-type">
              <span class="type-title">采集类型:</span>
              <b-badge
                variant="light"
                class="states-type-item"
                :class="{ isActive: collectionChange == item.index }"
                v-for="item in collectiontype"
                :key="item.index"
                @click="collection(item)"
              >
                {{ item.name }}</b-badge
              >
            </div>
            <div class="states-type">
              <span class="type-title">统计类型:</span>
              <b-badge
                variant="light"
                class="states-type-item"
                :class="{ isActive: statisticalChange == item.index }"
                v-for="item in statisticaltype"
                :key="item.index"
                @click="statistical(item)"
              >
                {{ item.name }}</b-badge
              >
            </div>
            <div class="states-time">
              <span class="time-title">时间范围:</span>
              <b-badge
                variant="light"
                class="states-time-item"
                :class="{ isActive: timeChange == item.index }"
                @click="timeTitle(item)"
                v-for="item in timeFrame"
                :key="item.index"
                >{{ item.days }}</b-badge
              >
            </div>
            <div class="sparklines">
              <h4 class="card-title mb-4" style="font-size: 17px;">7日采集失效数量走势变化</h4>
              <apexchart
                class="apex-charts"
                height="350"
                type="area"
                dir="ltr"
                :series="splineAreaChart.series"
                :options="splineAreaChart.chartOptions"
              ></apexchart>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-12" style="padding:0;">
        <div class="card" style="margin-bottom: 0;">
          <div class="card-body" style="margin-top: 0;">
            <div class="all-products" style="margin-top: 0;">爬虫站点管理</div>
            <div class="states-type">
              <span class="type-title">站点类型:</span>
              <b-badge
                variant="light"
                class="states-type-item"
                :class="{ isActive: siteChange == item.index }"
                v-for="item in sitetype"
                :key="item.index"
                @click="allSites(item)"
              >
                {{ item.name }}</b-badge
              >
            </div>
            <div class="states-type">
              <span class="type-title">采集类型:</span>
              <b-badge
                variant="light"
                class="states-type-item"
                :class="{ isActive: reptileChange == item.index }"
                v-for="item in reptiletype"
                :key="item.index"
                @click="reptile(item)"
              >
                {{ item.name }}</b-badge
              >
            </div>
            <div class="states-time">
              <div class="ad">
                <b-button variant="danger" style="margin-right: 20px" size="sm">
                  <i class="ri-error-warning-line align-middle mr-1"></i>
                  错误日志
                </b-button>
                <b-button variant="primary" size="sm">
                  <i class="ri-add-line align-middle mr-1"></i>添加种子
                </b-button>
              </div>
              
              <div>
                <span class="time-title">全部状态:</span>
                <b-badge
                  variant="light"
                  class="states-time-item"
                  v-for="item in states"
                  :class="{ isActive: stateChange == item.index }"
                  :key="item.index"
                  @click="statesItem(item)"
                  >{{ item.type }}</b-badge
                >
              </div>
            </div>
          </div>
        </div>
        <Transaction />
      </div>
    </div>
  </Layout>
</template>
<style lang="scss" scoped>
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.seedbody {
  margin-bottom: 0px;
}
// 走势图
.sparklines{
  margin-top: 20px;
  font-size: 15px;
}
.count {
  .title {
    font-size: 15px;
    font-weight: bold;
  }
  .zhankai {
    float: right;
    img {
      vertical-align: middle;
      width: 20px;
      padding-right: 10px;
    }
  }
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  margin-top: 20px;
}
.states-type {
  margin-top: 20px;
  .type-title {
    display: inline-block;
    font-size: 15px;
  }
  .states-type-item {
    font-size: 15px;
    padding: 5px 25px;
    margin: 0 10px;
    font-weight: 400;
    border-radius: 4px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 20px;
  .ad {
    float: right;
  }
  .time-title {
    display: inline-block;
    font-size: 15px;
  }
  .states-time-item {
    font-size: 15px;
    padding: 5px 20px;
    margin: 0 10px;
    font-weight: 400;
    &:hover {
      cursor: pointer;
    }
  }
}
.card-body {
  margin-top: 20px;
}

</style>